<template>
   <view class="aa">
		<view class="uni-margin-wrap">
		    <swiper 
		      class="swiper" 
		      circular 
		      :indicator-dots="indicatorDots" 
		      :autoplay="autoplay" 
		      :interval="interval"
		      :duration="duration"
		    >
		      <swiper-item v-for="(item, index) in swiperList" :key="index">
		        <image 
		          class="swiper-image" 
		          :src="item.url" 
		          mode="aspectFill"
		        ></image>
		      </swiper-item>
		    </swiper>
		  </view>
		  
		  <view class="notices">
			  <view class="notices-icon">
			  	<image src="/static/images/bell.png" class="bti"></image>
				 <view class="info">今天鲤鱼塘开放5个钟啦...</view>
			  </view>
			 
		  </view>
		  <!-- 排行榜 -->
		  <view class="rank-list">
			  <view class="header">
				  <text class="title">动态排行榜</text>
				  <navigator url="/pages/dynamicRank/dynamicRank" class="load-more">更多<span>></span></navigator>
			  </view>
		  </view>
		  <view class="card">
			 <view class="card-box">
				 <image src="/static/images/jb1.png" class="jb"></image>
				 <image src="/static/rankingList/ranking7.png" class="toxian"></image>
				<view class="text-a">钓鱼小达人</view>
				<view class="text-b">累计总量352斤</view>
			 </view>	
			 <view class="card-box">
				 <image src="/static/images/jb2.png" class="jb"></image>
				 <image src="/static/rankingList/ranking7.png" class="toxian"></image>
				 <view class="text-a">钓鱼小达人</view>
				 <view class="text-b">累计总量331斤</view>
			 </view>
			 <view class="card-box">
			 		<image src="/static/images/jb3.png" class="jb"></image>	
						 <image src="/static/rankingList/ranking7.png" class="toxian"></image>
						 <view class="text-a">钓鱼小达人</view>
						 <view class="text-b">累计总量310斤</view>
			 </view>
		  </view>
		  <!-- 开钓付费 -->
		  <view class="rank-ga">
		  			  <view class="header">
		  				  <text class="title">开钓付费</text>
		  				  <navigator url="/pages/dynamicRank/dynamicRank" class="load-more">更多<span>></span></navigator>
		  			  </view>
		  </view>
		  <view class="fu">
			  <view class="fu-box">
				  <image class="fu-img"  src="/static/images/t1.jpg"></image>
				  <view class="f1">
				  <view class="ytbt">鲤鱼塘</view>
				  <text user-select="true" class="js">体长形，侧扁；腹部圆，头较小；体背灰黑或黄褐色，体侧带金黄色，腹部灰白色；背鳍和尾鳍基部微黑，尾鳍下叶红色</text>
				  <view class="jg1">价格：<span class="jg">110元</span></view>
				  
				  </view>
			  </view>
		  </view>
		  <view class="fu">
		  			  <view class="fu-box">
		  				  <image class="fu-img"  src="/static/images/a2.jpeg"></image>
		  				  <view class="f1">
		  				  <view class="ytbt">综合塘</view>
						  <view class="a1">草鱼 大头鲢鱼 黑皖 罗非</view>
		  				  <text class="js">广大钓鱼爱好者喜欢钓鱼的地方。............</text>
		  				  <view class="jg1">价格：<span class="jg">110元</span></view>
		  				  
		  				  </view>
		  			  </view>
		  </view>
	</view>	  
</template>

<script>
import { Static } from 'vue'

	export default {
		data() {
			return {
			          swiperList: [
			                  { url: '/static/images/banner1@2x.png' },
			                  { url: 'https://picsum.photos/800/400?random=3'  },
			                  { url: 'https://picsum.photos/800/400?random=4' }
			                ],
			                indicatorDots: true,
			                autoplay: true,
			                interval: 3000,
			                duration: 500
			              }
			            },
			            methods: {
			              intervalChange(e) {
			                this.interval = Number(e.target.value)
			              },
			              durationChange(e) {
			                this.duration = Number(e.target.value)
			              },
			              
			            }
	}
</script>

<style lang="less">
.aa{
	background-color: #f7f7f7;
}
.uni-margin-wrap {
  width: 690rpx;
  border-radius: 16rpx;
  overflow: hidden; 
  margin: 20rpx auto 0 auto;/* 隐藏图片圆角溢出部分 */
}

.swiper {
	
  height: 300rpx;
  font-size: 0; /* 解决图片底部空白 */
}

.swiper-image {
  width: 100%;
  height: 100%;
  display: block;
 
}
.bti{
	position: absolute;
	margin-top: 20rpx;
	left: 40rpx;
	width: 40rpx;
	height: 40rpx;
}
.info{
	position: absolute;
	width: 630rpx;
	height: 50rpx;
	top: 10rpx;
	left: 90rpx;
	line-height: 50rpx;
    background-color: #ffffff;
border-radius: 14rpx;	
}
.notices-icon{
	position: relative;
	width: 690rpx;
	height:60rpx;
	
	margin-top: 10rpx;	
}
.rank-list{
	width: 690rpx;
	height: 120rpx;background-color: #ffffff;
	margin: 10rpx auto 0 auto;
	border-radius: 14rpx 14rpx 0 0;
}
.title{
	font-size: 45rpx;
	line-height: 120rpx;
}
.load-more{
	float: right;
	line-height: 120rpx;
	
}
.card{
	width: 690rpx;
	height: 360rpx;
	background-color: #ffffff;
	margin: 0 auto 10rpx auto;
	border-radius: 0 0 14rpx 14rpx;
		
}
	.jb{
		width: 60rpx;
		height: 60rpx;
	}
	.toxian{
		width:160rpx;
		height: 160rpx;
	margin: 0 25px 0 25rpx;
	}
	.card-box{
		width:210rpx;
		height: 320rpx;
		box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
		float: left;
		margin-right: 30rpx;
		transition: all 0.2s linear;
		border-radius: 10rpx;
		}
	.card-box:last-child{
		margin-right: 0;
	}
		
	.text-a{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;		
	}
	.text-b{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 20rpx;
		text-align: center;	
		
	}
	.card-box:hover{
		transform: translateY(-10rpx);
	}
	.fu{
		width: 690rpx;
		margin: 0 auto 10rpx auto;
	}
	.fu-box{
		position: relative;
		width: 690rpx;
		height: 300rpx;
		background-color: #ffffff;
		border-radius: 14rpx;
		
	}
	.fu-img{
		width: 230rpx;
		height: 230rpx;
		margin: 25rpx 0 25rpx 18rpx;
		
	}
		
	.js{
		font-size: 22rpx;
	}
	.f1{
		position: absolute;
		right: 0%;
		top: 20rpx;
		width: 400rpx;
		height:350rpx
		
	}
	.jg{
		color: #ff6700;
	}
	.a1{
		font-size: 22rpx;
	}
	.rank-ga{
		width: 690rpx;
		
		margin: 10rpx auto 0 auto;
		border-radius: 14rpx;
	}
	.jg1{
		margin-top: 20rpx;
	}
</style>
